<template>
  <div class="process">
    <div class="process-tpl-pc" v-if="showPC">
      <otherform
        :step="step"
        :status="status"
        :process-instance-id="processInstanceId"
        :process-definition-key="processDefinitionKey"
        :task-id="taskId"
      ></otherform>
      <process
        :step="step"
        :status="status"
        :process-instance-id="processInstanceId"
        :task-id="taskId"
      ></process>
    </div>
    <mobileprocess
      v-else
      :step="step"
      :status="status"
      :process-instance-id="processInstanceId"
      :process-definition-key="processDefinitionKey"
      :process-definition-name="processDefinitionName"
      :task-id="taskId"
    />
  </div>
</template>
<script>
import processApi from '@/api/process'
import { getParameterByName } from '@/utils/util'
import otherform from '@/components/process/other/otherform-pc.vue'
import process from './process.vue'
import mobileprocess from '@/components/process/platform/mobile/process.vue'
export default {
  name: 'YSLC',
  components: {
    otherform,
    process,
    mobileprocess
  },
  data () {
    return {
      isPC: true,
      showPC: true,
      status: '',
      processDefinitionName: '',
      step: getParameterByName('route'),
      processInstanceId: getParameterByName('processInstanceId'),
      processDefinitionKey: getParameterByName('processDefinitionKey'),
      taskId: getParameterByName('taskId')
    }
  },
  methods: {
    judge () {
      if (window.innerWidth > 500) {
        this.showPC = true
      } else {
        this.showPC = false
      }
    }
  },
  created () {
    // action:   create(流程创建)    todo（待办，对应status 1） complete（已办,对应status 2)
    const action = getParameterByName('action')
    if (action === 'todo') {
      this.status = '1'
    } else if (action === 'complete' || action === 'show') {
      this.status = '2'
    } else {
      this.status = action
    }
    this.judge()
    window.addEventListener('resize', this.judge)
  },
  destroyed () {
    window.removeEventListener('resize', this.judge)
  }
}
</script>
<style scoped lang="less">
.process {
  height: 100%;
}
</style>
